<!-- 二维码、游客登录 模块 -->
<template>
	<div class="login-qr">
		<div class="login-qr-box">
			<img
				src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9643571155/525c/faac/2dc6/fe695c03c7c358ddaa4651736b26a55f.png"
				alt="">
			<div class="login-qr-box__right">
				<span>扫码登录</span>
				<div class="login-qr-box__right__qr">
					<img :src="img" alt="">
					<div class="QROverdue" v-if="!QRStatus">
						<span>二维码已失效</span>
						<button @click="refreshHandler">点击刷新</button>
					</div>
				</div>
				<div class="login-qr-box__right__bottom">使用 <span @click="clickHandler">网易云音乐APP</span> 扫码登录</div>
			</div>
		</div>
		<div class="login-qr-bottom">
			<button @click="visitorLogin">游客登录</button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, onUnmounted } from 'vue';
import { getQRcodeKeyApi, createQRcodeApi, checkQRcodeApi, visitorLoginApi } from '@/api/loginApi'
import router from '@/router/index'

let key = ''
let img = ref<string>('')
var timer: any
let QRStatus = ref<Boolean>(true)
// 获取key
const getQRKeyHandler = async () => {
	const res = await getQRcodeKeyApi()
	key = res.data.unikey
}
// 根据key获取二维码
const getQRHandler = async () => {
	const base = await createQRcodeApi(key)
	img.value = base.data.qrimg
	QRStatus.value = true
}
// 获取二维码扫描状态
const checkQRHandler = async () => {
	const res = await checkQRcodeApi(key)
	console.log(res);
	
	switch (res.code) {
		case 800:
			clearInterval(timer)
			QRStatus.value = false
			break;
		case 801: console.log('等待扫码');
			break;
		case 802: console.log('待确认');
			break;
		case 803:
			router.push({ name: 'home' })
			break;
	}
}

// 合并请求流程
const requestQRInfo = () => {
	getQRKeyHandler()
		.then(() => {
			getQRHandler()
		})
		.then(() => {
			timer = setInterval(() => {
				checkQRHandler()
			}, 3000)
		})
}
// 游客登录
const visitorLogin = async () => {
	const res = await visitorLoginApi()
	if (res.code === 200) {
		router.push({ name: 'foundMusic' })
		window.$message.success('游客登录成功')
	}
}

// 过期刷新二维码
const refreshHandler = () => {
	requestQRInfo()
}

const clickHandler = () => {
	window.$message.info('别点了，没做')
}

onMounted(() => {
	requestQRInfo()
})

onUnmounted(() => {
	clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.login-qr {
	height: 290px;
	width: 540px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border: 1px solid #ccc;
	padding: 20px 0;
	box-shadow: #eee 0 1px .5px 1px;

	&-box {
		height: 85%;
		display: flex;
		justify-content: center;

		&>img {
			height: 100%;
			width: 25%;
			margin-right: 50px;
		}

		&__right {
			display: flex;
			justify-content: space-around;
			flex-direction: column;
			align-items: center;

			&>span {
				font-size: 22px;
				text-align: center;
			}

			&__qr {
					position: relative;
					width: 160px;
					height: 160px;

					& > img {
						height: 160px;
						width: 160px;
					}

					.QROverdue {
						position: absolute;
						height: 100%;
						width: 100%;
						top: 0;
						left: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						background-color: rgba(255, 255, 255, 0.9);

						& > span {
							display: block;
							height: 30px;
							text-align: center;
							font-size: 14px;
						}

						& > button {
							background-color: #78D078;
							border-radius: 3px;
							border: 1px solid #5bdc5b;
							height: 25px;
							font-size: 12px;
							color: #fff;
							padding: 0 8px;
							line-height: 1;
							cursor: pointer;
						}
					}
				}

			&__bottom {
				color: #9F9F9F;
				font-size: 14px;

				&>span {
					color: #0C73C2;
					cursor: pointer;
				}

			}
		}
	}

	&-bottom {
		height: 15%;
		display: flex;
		justify-content: center;

		button {
			align-self: self-end;
			height: 30px;
			padding: 2px 20px;
			border: 1px solid #333;
			border-radius: 15px;
			font-size: 12px;
			color: #000;
			background-color: #fff;
			cursor: pointer;
		}
	}
}
</style>